<template>
	<view class="content">
		<!-- 积分数以及积分提现 -->
		<view class="f1">
			<text>{{user.integral}}
				<text style="font-size: 10rpx; margin-left: 20rpx; background-color: #2196F3; border-radius: 40%;">积分</text>
			</text>
			<view class="tixian" @click="goto('/pages/rewards/rewards')">
				申请提现
			</view>
		</view>
		
		<!-- 分段器 积分明细 积分收入 积分支出 -->
		<view class="f2">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#4cd964"></uni-segmented-control>
			        <view class="content">
			            <view v-show="current === 0">
			                <!-- 显示积分明细 -->
			                <view v-for="detail in pointDetails" :key="detail.id">
			                <!-- 在这里显示积分明细的内容，根据具体数据结构进行展示 -->
			                    {{ detail }}
			                </view> 
			            </view>
			            <view v-show="current === 1">
			                <!-- 显示积分收入 -->
			                <view v-for="income in pointIncome" :key="income.id">
			                    <!-- 在这里显示积分收入的内容，根据具体数据结构进行展示 -->
			                    {{ income }}
			                </view>
			            </view>
			            <view v-show="current === 2">
			                <!-- 显示积分支出 -->
			                <view v-for="expense in pointExpense" :key="expense.id">
			                    <!-- 在这里显示积分支出的内容，根据具体数据结构进行展示 -->
			                    {{ expense }}
			                </view>
			            </view>
			        </view>
		</view>
	</view>
</template>

<script>
	import {} from '../../common/api/integral.js';
	export default {
		data() {
			return {
				title:'我的积分',
				items: ['积分明细', '积分收入', '积分支出'],
				current: 0,
				pointDetails: [], // 存储积分明细数据
				pointIncome: [], // 存储积分收入数据
				pointExpense: [], // 存储积分支出数据
				user:{},
			}
		},
		mounted(){
			this.user = uni.getStorageSync('user');
		},
		methods: {
			onClickItem(e) {
			    if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
			    }
			},
			goto(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.f1{
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 100rpx;
		color: #f8f8f8;
		background-color: #6FCF97;
		
		.tixian{
			width: 145rpx;
			margin-top: 20rpx;
			font-size: $uni-font-size-base;
			color: #f8f8f8;
			border-radius: 40rpx;
			border: 1px solid #f8f8f8;
			padding: 10rpx;
		}
	}
	.f2{
		width: 100%;
	}
</style>
